<template>
  <ul class="yin-header-nav">
    <li :class="{ active: item.name === activeName }" v-for="item in styleList" :key="item.path" @click="handleChangeView(item)">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup lang="ts">

defineProps({
  styleList: Array<{name: string, path: string}>,
  activeName: String,
});

const emit = defineEmits<{
  (e: 'click', path: string, name: string): void
}>();

function handleChangeView(item: { path: string; name: string; }) {
  emit('click', item.path, item.name);
}
</script>

<style lang="scss" scoped>
// 使用Sass 3.0新模块系统导入
@use "@/assets/css/var" as *;

li {
  margin: $header-nav-margin;
  padding: $header-nav-padding;
  line-height: 3.3rem;
  color: $color-grey;
  border-bottom: none;
  cursor: pointer;
}

li.active {
  color: $color-black;
  font-weight: 600;
  border-bottom: 5px solid $color-black;
}
</style>
